<template>
  <view class="containter">
    <!-- 头部 -->
    <navbar @openleft="openleft" />
    <!-- 轮播图 -->
    <view class="swiper-linner">
      <uv-swiper :list="bannerList" height="382rpx" indicator indicatorMode="line" circular></uv-swiper>
    </view>
    <view class="downer"></view>
    <!-- 硬件 -->
    <view class="hardware">
      <view class="hardware-title">
         {{$i18n.t('hardware')}}
      </view>
      <view class="hardware-content">
        <view class="hardware-content-fl">
          <view class="hardware-fl-item" @click="setIndex(index)" :class="currentIndex == index?'active':''"
            v-for="(item, index) in hardware_data" :key="index">
            {{item.name}}
          </view>
        </view>
        <view class="hardware-content-fr" v-if="hardware_data[currentIndex]">
          <view class="hardware-fr-item" @click="toDetail(item)" v-for="(item, index) in hardware_data[currentIndex].hardware" :key="index">
            <image class="hardwareImg" :src="item.image" mode=""></image>
            <view class="linner">
              <view class="linner-title">
                {{ item.name }}
              </view>
              <view class="linner-desc text-twoline-ellipsis">
                {{ item.blurb }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="downer"></view>
    <!-- 软件 -->
    <view class="software">
      <view class="software-title">
        {{$i18n.t('software')}}
      </view>
      <view class="software-content">
        <view class="software-content-item" @click="tosoftDetail(item)" v-for="(item, index) in software" :key="index">
          <image class="software-icon" :src="item.image" mode=""></image>
          <view class="software-label">
            {{item.name}}
          </view>
        </view>
      </view>
    </view>
    <!-- footer -->
    <foot />
    <!-- 左侧组件 -->
    <leftnavbar :currentIndex="1" @jump="jump" ref="children" />
    <!-- 联系组件 -->
    <connect />
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        currentIndex: 0,
        hardware_data: [],
        software: [],
        bannerList: [],
      }
    },
    onLoad() {
      this.getData();
      this.getBannerData();
    },
    methods: {
      getData() {
        reqApi.softInfo({}).then((res) => {
          console.log("软硬件内容", res);
          this.hardware_data = res.data.hardware_data;
          this.software = res.data.software;
        });
      },
      getBannerData() {
        reqApi.bannerData({
          type: "opt1"
        }).then((res) => {
          console.log("轮播图", res);
          this.bannerList = res.data.map(v => v.image);
        });
      },
      openleft() {
        this.$refs.children.open();
      },
      jump(path) {
        uni.navigateTo({
          url: path
        })
      },
      setIndex(index) {
        this.currentIndex = index;
      },
      toDetail(item) {
        let type = "opt1";
        uni.navigateTo({
          url: `/pages/home/detail?id=${item.id}&type=${type}`
        })
      },
      tosoftDetail(item){
        let type = "opt2";
        uni.navigateTo({
          url: `/pages/home/detail?id=${item.id}&type=${type}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .active {
    background: #104682 !important;
    color: #fff !important;
  }

  .software {
    padding: 40rpx;
    box-sizing: border-box;
    background: #fff;

    .software-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .software-content {
      display: flex;
      flex-wrap: wrap;

      .software-content-item:nth-child(3n) {
        margin-right: 0 !important;
      }

      .software-content-item {
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(16, 70, 130, 0.1);
        border-radius: 20rpx;
        width: 208rpx;
        height: 170rpx;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        margin-top: 30rpx;

        .software-icon {
          width: 68rpx;
          height: 68rpx;
        }

        .software-label {
          font-weight: bold;
          font-size: 24rpx;
          color: #104682;
          margin-top: 16rpx;
        }
      }
    }
  }

  .containter {
    .swiper-linner {
      padding: 20rpx 10rpx;
      box-sizing: border-box;
      background: #fff;
    }

    .hardware {
      padding: 40rpx;
      box-sizing: border-box;
      background: #fff;

      .hardware-title {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 40rpx;
      }

      .hardware-content {
        display: flex;
        justify-content: space-between;

        .hardware-content-fl {
          display: flex;
          flex-direction: column;
          margin-right: 40rpx;

          .hardware-fl-item {
            width: 160rpx;
            height: 64rpx;
            border-radius: 12rpx;
            border: 2rpx solid rgba(16, 70, 130, 0.3);
            font-weight: 400;
            font-size: 24rpx;
            color: #104682;
            text-align: center;
            line-height: 64rpx;
            margin-bottom: 40rpx;
          }
        }

        .hardware-content-fr {
          flex: 1;

          .hardware-fr-item:last-child {
            margin-bottom: 0 !important;
          }

          .hardware-fr-item {
            display: flex;
            margin-bottom: 40rpx;

            .hardwareImg {
              width: 120rpx;
              height: 120rpx;
              margin-right: 20rpx;
              background: red;
              border-radius: 12rpx;
            }

            .linner {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              flex: 1;

              .linner-title {
                font-weight: bold;
                font-size: 28rpx;
                color: #333333;
              }

              .linner-desc {
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
</style>